
@border: #7CC5C1;
@background: #FFF7EA;

@font-face {
	font-family: "D3Craftism";
	src: url(D3Craftism.ttf);
}

body {
	margin: 18px;
	background: url();
}

::selection {
	background: #C8FF82;
}

::-moz-selection {
	background: #C8FF82;
}

.grad(@top, @bottom) {
	background-color: mix(@top, @bottom, 50%);
	background-image: linear-gradient(bottom, @bottom 0%, @top 100%);
	background-image: -webkit-linear-gradient(bottom, @bottom 0%, @top 100%);
	background-image: -moz-linear-gradient(bottom, @bottom 0%, @top 100%);
	background-image: -o-linear-gradient(bottom, @bottom 0%, @top 100%);
	background-image: -ms-linear-gradient(bottom, @bottom 0%, @top 100%);
}

.autograd(@color, @amount: 10%) {
	.grad(@color, darken(@color, @amount));
	border-top: 1px solid lighten(@color, @amount);
}

.middle() {
	max-width: 960px;
	min-width: 750px;
	margin: 0px auto 0px auto;
}

.column {
	.middle();
	border-radius: 8px 8px 0px 0px;
	overflow: hidden;
	box-shadow: 0px 0px 40px rgba(0,0,0, 0.6);
	background: #FFF7EA;
}

h1, .about {
	display: inline-block;
	vertical-align: middle;
}

a {
	@color: #FF4422;
	color: @color;

	&:hover {
		color: lighten(@color, 10%);
	}
}


ul ul {
	margin: 0px;
}

p {
	margin: 10px 8px;
	line-height: 150%;


	> img {
		margin-left: auto;
		margin-right: auto;
		display: block;
		border: 1px solid #BDBDBD;
		box-shadow: 1px 1px 4px rgba(0,0,0, 0.2);
	}
}

p, em {
	> code {
		padding: 1px 6px;
		border-radius: 8px;
		background: #E7E7E7;
		border-bottom: 1px solid #D1D1D1;
		font-size: 14px;
	}
}

li > code {
	font-size: 14px;
}

.header {
  @bgcolor: #46C5BD;

  @highlight: lighten(@bgcolor, 40%);
	.autograd(lighten(@bgcolor, 30%));
	padding: 4px 12px;
	border-radius: 8px 8px 0px 0px;
	text-align: center;
	position: relative;

	h1 {
		@shadow: 1px 1px 0px #50948F;
		margin: 0px;
		font-family: "D3Craftism";
		text-shadow: @shadow;
		font-weight: normal;
		font-size: 52px;
		line-height: 48px;

		a {
			color: white;
			border: 0;
			text-decoration: none;

			&:hover {
				color: lighten(#50948F, 50%);
				text-shadow: @shadow, 0px 0px 20px white;
			}
		}
	}

	.social-buttons {
		text-align: left;
		position: absolute;
		left: 8px;
		top: 8px;
	}

	.about {
		color: white;
		box-shadow: 0px 0px 10px rgba(0,0,0, 0.5);
		background: #0F5A5A;
		border-radius: 20px;
		padding: 3px 15px;
		margin: 8px 0px 4px 0px;
		font-size: 14px;
		opacity: 0.8;

		a {
			color: #A3E4A3;
			border: 0;

			&:hover {
				color: darken(#A3E4A3, 10%);
			}
		}
	}

	border-bottom: 1px solid @border;
}

.nav {
	text-align: center;
	.autograd(#e9d8c4);
	font-size: 12px;
	color: #333;
	border-bottom: 1px solid #C4A37E;

	a {
		display: inline-block;
		color: #534735;
		font-weight: bold;
		text-decoration: none;
		text-shadow: 1px 1px 0px lighten(#e9d8c4, 10%);
		font-size: 14px;

		&:not(:last-child) {
			border-right: 1px solid #FFECD3;
			box-shadow: inset -1px 0px #C0A153;
		}

		padding: 6px 12px;

		&:hover {
			background: blue;
			background: rgba(255,255,255, 0.2);
		}

		&:active {
			position: relative;
			top: 1px;
		}

		&.current {
			background: #DBBF9F;
		}
	}
}

.footer {
	.middle();
	text-align: center;
	color: #555;
	font-size: 12px;
	padding-top: 8px;

	a {
		color: #444;
	}
}

.package {
	@margin: 8px;

	background: white;
	border: 1px solid #969696;
	box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
	margin: 20px;

	color: #222;

	.annotation {
		color: gray;
		font-size: 14px;
		font-weight: normal;
		font-style: italic;
	}

	.package_name, .type_name {
		margin: 0px;
		padding: 8px;
		color: #222;
		text-shadow: 1px 1px 0px #eee;
		.autograd(#ddd);
	}

	.type_name {
		border-top: 1px solid #C5C5C5;
	}

	.tagged_methods {
		padding-bottom: @margin;
	}

	.tag_group {
		display: inline-block;
		vertical-align: top;

		margin: @margin @margin*2;

		.group_title {
			font-weight: bold;
		}

		ul {
			margin: 0px;
			list-style: none;
			padding: 0px;
			padding-left: 10px;
		}
	}

	.method_list {
		border-top: 1px dashed #C2C2C2;
		padding-top: @margin*2;
		margin: @margin;
	}

	.package_description, .type_description {
		p {
			margin-left: @margin;
			margin-right: @margin;
		}
	}

	pre {
		margin: @margin;
		border: 1px dashed @border;
		background: #E7FFF6;
		font-size: 14px;
		padding: @margin;

		box-shadow: inset 0px 1px 0px white;
	}

	.method {
		padding-bottom: 8px;

		.method_name {
			@color: #FF1F6F;
			margin: 8px 0;
			padding-left: 5px;

			a {
				display: block;
				text-decoration: none;
				border: 0;
				color: @color;

				.para {
					color: lighten(@color, 30%);
				}

			}

			&:hover {
				.para {
					color: @color;
				}
			}
		}

letter-spacing: 1px;
letter-spacing: 1px;
		.method_description {
			margin-left: @margin + 2;
		}


		.prototype {
			color: gray;
			font-style: italic;
			border: 1px solid #D5D5D5;
			padding: 4px;
			margin: 8px;

		}
	}
}

.body {
	box-shadow: inset 0px 11px 10px -10px #B1ADA3;
	padding-top: 1px;
}

.box {
	background: white;
	border: 1px solid #969696;
	box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
	color: #222;
}

.home {
	@margin_width: 224px;

	p, h2, h3, pre {
		margin: 18px;
	}

	.leader {
		color: #362B0C;
		font: italic 20px/26px serif;
		text-align: center;

		strong {
			color: darken(#362B0C, 5%);
		}
	}


	h2.decorative {
		display: inline-block;
		font-family: serif;
		font-style: italic;
		font-weight: normal;
		letter-spacing: 1px;
		color: #AA8767;
		margin: 18px 0px 12px 0px;
		padding: 0px 24px;
		border-bottom: 1px dashed #d5d5d5;
	}

	.box {
		.title {
			margin: 0px;
			padding: 8px;
			color: #222;
			.autograd(#ddd);
		}
	}

	.button-layout() {
		text-align: center;
		display: inline-block;
		text-decoration: none;
		vertical-align: middle;
		width: 200px;

		span {
			display: block;
			margin: 2px;

			&.top {
				font-weight: bold;
				font-size: 16px;
			}

			&.sub {
				font-size: 13px;
			}
		}
	}

	.button-row {
		text-align: center;
		.autograd(#5F4D3F);
		box-shadow: 0px 0px 12px rgba(0,0,0, 0.4),
			0px -1px 0px #413328;
	}

	.row {
		padding: 12px;
	}

	.center-row {
		text-align: center;
	}

	.download-button {
		.button-layout();
		@color: #5FAC65;
		@height: 8px;
		@sink: 4px;

		margin: 12px;
		margin-bottom: 12px + @height;
		padding: 8px;

		background: @color;
		.autograd(@color);
		color: white;

		border-radius: 12px;

		border-bottom: 1px solid @color;
		border-top: 1px solid desaturate(@color, 10%);

		text-shadow: -0px -1px 0px darken(@color, 20%);

		box-shadow: 0px @height 0px darken(@color, 30%),
			0px @height 12px rgba(0,0,0,1.0);


		&:hover {
			@light: lighten(@color, 3%);
			.autograd(@light);
			border-bottom: 1px solid @light;
			border-top: 1px solid desaturate(@light, 10%);
		}

		&:active {
			position: relative;
			top: @sink;

			box-shadow: 0px @height - @sink 0px darken(@color, 30%),
				0px @height - @sink 12px rgba(0,0,0,1.0);
		}
	}

	.source-button {
		.button-layout();

		border-radius: 12px;
		margin: 12px;
		padding: 8px;

		border: none;
		.autograd(desaturate(#B2F8B0, 55%));
		color: #425744;
		text-shadow: 0px 1px #EBFFEA;

		box-shadow:
			0px 0px 12px rgba(0,0,0, 0.5);

		&:hover {
			.autograd(lighten(desaturate(#B2F8B0, 55%), 3%));
		}

		&:active {
			position: relative;
			top: 1px;
		}
	}

	.game-picker {
		text-align: center;
		margin-bottom: 24px;

		.bookend {
			display: inline-block;
			vertical-align: middle;
			text-align: center;
			font-size: 128px;

			margin: 12px;

			color: #DAC7A8;
			text-shadow: -1px -1px #B6AEA1, 1px 1px 0px white;

			position: relative;
			top: -8px;
		}

		.game {
			display: inline-block;
			vertical-align: middle;
			text-align: right;

			margin: 10px;
			width: 260px;
			height: 160px;

			padding-top: 4px;
			padding-right: 4px;

			border: 1px solid #C0A07D;

			&.volcanox {
				background: url("images/small_title.png") 50% 50%;
			}

			&.tetris {
				background: url("images/tetris_title.png") 50% 50%;
			}

			box-shadow:
				1px 1px 4px rgba(0,0,0,0.3),
				inset 0px 0px 0px 1px white;

			position: relative;

			a.button {
				text-align: center;
				color: white;
				display: inline-block;
				width: 100px;
				background: green;
				margin: 2px;
				border-radius: 2px;

				font-size: 12px;
				font-weight: bold;
				line-height: 20px;

				text-decoration: none;
				text-shadow: 1px 1px 0px darken(#ED6554, 30%);
				.autograd(desaturate(#ED6554, 20%), 14%);

				opacity: 0.9;

				&:hover {
					opacity: 1;
					.autograd(lighten(#ED6554, 5%), 14%);
				}

				&:active {
					@c: #ED6554;
					border-top-color: @c;
					.grad(darken(@c, 10%), lighten(@c, 10%));
					position: relative;
					top: 1px;
				}

			}

			.title {
				position: absolute;
				text-align: left;
				left: 1px;
				right: 1px;
				bottom: 1px;

				padding: 4px;

				background: rgba(0,0,0, 0.8);
				font-weight: bold;
				font-size: 18px;

				color: white;
				text-shadow: 1px 1px 0px black;
			}

			// -webkit-transition: -webkit-transform 0.08s ease-in;

			&:hover {
				// -webkit-transform:rotate(4deg);
				// -webkit-transition: -webkit-transform 0.08s ease-in;
			}
		}
	}

	.bottom {
		@back: #46392F;
		background: @back;
		color: lighten(@back, 70%);
		padding: 12px 40px;

		border-top: 1px solid darken(@back, 10%);
		box-shadow:
			inset 0px 1px 0px #635431,
			inset 0px 8px 12px -4px darken(@back, 10%);


		a {
			@color: #FF62EC;
			color: @color;

			&:hover {
				color: lighten(@color, 5%);
			}
		}

		p {
			font-size: 14px;
			line-height: 22px;
		}

		p > code {
			background: darken(@back, 5%);
			border-bottom: 1px solid lighten(@back, 10%);
		}

		h2, h3 {
			color: #DBC6B6;
			text-shadow: 0px -1px 0px #272009;
			margin-top: 30px;
			border-bottom: 1px dashed lighten(@back, 10%);
			padding-bottom: 4px;
		}

		pre {
			padding: 10px;
			background: darken(@back, 5%);
			border: 1px dashed lighten(@back, 10%);
			font-size: 14px;
		}
	}
}

.tutorial, .changelog {
	@shadow_color: desaturate(darken(@background, 30%), 80%);
	margin: 18px;

	h2 {
		font-size: 24px;
	}

	h2, h3 {
		color: #664500;
	}

	p {
		margin: 20px 8px;
		color: #221B10;
	}

	pre {
		background: #FFE9C3;
		border: 1px dashed darken(@background, 60%);
		box-shadow: 1px 1px 8px @shadow_color;
		padding: 12px;
		font-size: 14px;
	}

	.index {
		float: right;
		margin: 20px;
		margin-top: 0px;

		li {
			padding: 2px 0px;
		}

		> ul {
			display: inline-block;
			background: #FFEED2;
			margin: 0px;
			padding: 18px;
			padding-left: 34px;
			border-radius: 8px;
			border: 1px solid #DDC69F;
			box-shadow:
				inset 0px 1px 0px white,
				0px 6px 12px -6px @shadow_color;
		}

		ul ul {
			padding-left: 18px;
		}
	}

	p, em {
		> code {
			background: darken(@background, 10%);
			border-bottom: 1px solid darken(@background, 20%);
			color: darken(@background, 80%);
		}
	}

}

.changelog {
	.release {
		h2 {
			font-size: 18px;
		}
	}
}

// now to color everything
pre {
	.cp {
		color: #F1752F;
	}

	.nt, .nf {
		color: #349BCC;
	}

	.s, .s2 {
		color: #259E25;
	}

	.na {
		color: #5E5E5E;
	}

	.mi {
		color: #A33CA3;
	}

	.nx, .nc {
		color: #FF45A6;
	}

	.p, .o {
		color: #4D4D4D;
	}

	.kd {
		color: #94680C;
	}

	.k {
		color: #FF2525;
		font-weight: bold;
	}

	.c1 {
		background: #CBE891;
		color: green;
	}
}

